//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

@mixin progress() {
    /* ==========================================================================
       Progress

       Default Mendix progress widget.
    ========================================================================== */

    .mx-progress {
        color: $font-color-default;
        background: $bg-color-secondary;

        .mx-progress-message {
            color: $font-color-default;
        }

        .mx-progress-indicator {
            position: relative;
            overflow: hidden;
            width: 100%;
            max-width: 100%;
            height: 2px;
            margin: auto;
            padding: 0;
            border-radius: 0;
            background: $gray-lighter;

            &:before,
            &:after {
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                width: 50%;
                height: 2px;
                content: "";
                transform: translate3d(-100%, 0, 0);
                background: $brand-primary;
            }

            &::before {
                animation: loader 2s infinite;
            }

            &::after {
                animation: loader 2s -2s infinite;
            }
        }
    }

    @keyframes loader {
        0% {
            transform: translate3d(-100%, 0, 0);
        }
        100% {
            transform: translate3d(200%, 0, 0);
        }
    }
}
